<style lang="scss">
  @import 'index';
</style>

<template>
  <div class="ga-container">
    <div class="ga-product-list">
      <!--筛选菜单-->
      <ul class="ga-filter">
        <li class="item" :class="{active:filters=='sales'}" @click="tab('sales')">销量 <i class="gaIcon icon-caret-down"></i></li>
        <li class="item" :class="{active:filters=='complex'}" @click="tab('complex')">综合 <i class="gaIcon icon-caret-down"></i></li>
        <li class="price" :class="{active:filters=='price'}" @click="tab('price')">
          <span class="txt">价格</span>
          <div class="icon-box" :class="{up:sort=='asc',down:sort=='desc'}">
            <i class="gaIcon icon-caret-up"></i>
            <i class="gaIcon icon-caret-down"></i>
          </div>
        </li>
        <li class="item" :class="{active:filters=='newest'}" @click="tab('newest')">新品</li>
      </ul>

      <!--商品列表-->
      <ul class="ga-group-list ga-media-list">
        <li v-for="(item,index) in proList" :key="index">
          <a class="item" :href="'/pages/shopDetail/main?id='+item.id">
            <div class="item-media">
              <image class="img-box" mode="aspectFill" :src="item.icon"></image>
            </div>
            <div class="item-inner">
              <p class="title">{{item.id}}---{{item.goods_name}}</p>
              <p class="p2">库存 <span>{{item.goods_number}}</span></p>
              <p class="p3">点击量 <span>{{item.click_count}}</span></p>
              <p class="p4">
                ¥ <span>{{item.shop_price}}</span>
              </p>
            </div>
          </a>
        </li>
        <!--<li>
          <a class="item" href="/pages/shopDetail/main">
            <div class="item-media">
              <image class="img-box" mode="aspectFill" src="http://ga-1255639017.file.myqcloud.com/images/test/ads1.jpg"></image>
            </div>
            <div class="item-inner">
              <p class="title">海南荔枝海南荔枝海南荔枝海南荔枝海南荔枝海南荔枝  1.5kg装</p>
              <p class="p2">已售 <span>417</span>件</p>
              <p class="p4">
                ¥ <span>32.8</span>
              </p>
            </div>
          </a>
        </li>-->
      </ul>
    </div>
  </div>
</template>

<script>
  let flag='desc';
  export default {
  data () {
    return {
      filters:'',
      proList:[],
      sort:'',
      page:1
    }
  },
  methods:{
    /**
     * 获取商品列表数据
     */
    async load () {
        let params = {
            page:this.page,
            sort: this.filters,
            sorttype: this.sort,
            category_id: this.$root.$mp.query.id
        }
        this.$_util.ajax.get('https://guo-a.com/mapi/product/productlist',params).then((res) =>{
            if(res.code === 200){
                let lists=res.data;
                let pages=Math.ceil( parseInt(res.total) / 10);
                if(this.page <= pages){
                    this.proList=this.proList.concat(lists);
                }else {
                    wx.showToast({
                        title: '没有更多数据了',
                        icon: 'none'
                    })
                    return;
                }
            }
        })
    },

    /**
     * 类型切换
     * @param type : 筛选类型
     * @param sort : 排序方式
     * */
    tab(type,sort){
      //切换重置数据
      this.proList=[];
      this.page=1;

      this.filters=type;
      this.sort=sort;

      if(this.filters=='price' && flag=='desc'){
        this.sort='asc';
        flag='asc';
      }else {
        this.sort='desc';
        flag='desc';
      }

      this.load();
    }
  },

  /*上拉加载更多*/
  onReachBottom(){
    this.page++;
    this.load();
  },

  mounted () {
    this.filters="newest"
    this.sort="desc"
    this.proList=[]
    this.load()
  }
}
</script>
